import React, { Component, PropTypes } from 'react';
import { Icon } from 'antd';
import 'styles/components/template/slide-document/column-layout.scss';

class ColumnLayoutLeft extends Component {
  render() {
    const { children, style = {}, className = '', collapsed } = this.props;
    return <div className={`column-layout-left ${collapsed ? 'collapsed' : ''} ${className}`} style={style}>
      {children}
    </div>
  }

  static defaultProps = {
    _left: true
  };
}

class ColumnLayoutRight extends Component {
  render() {
    const { children, style = {}, className = '', collapsed, _onClickCollapse } = this.props;
    return <div
      className={`column-layout-right ${collapsed ? 'collapsed' : ''} ${className}`}
      style={style}
    >
      <Icon
        type={collapsed ? 'menu-unfold' : 'menu-fold'}
        className='collapsed-icon'
        onClick={_onClickCollapse}
      />
      {children}
    </div>
  }

  static defaultProps = {
    _right: true
  };
}

class ColumnLayout extends Component {

  state = {
    collapsed: false
  };

  renderChildren = () => {
    const { children, leftWidth, onClickCollapse } = this.props;
    const { collapsed } = this.state;
    return React.Children.map(children, child => {
      if(typeof child !== 'string' && child !== null) {
        if(child.props._left)
          return React.cloneElement(child, {
            ...child.props,
            collapsed,
            style: { ...child.props.style, width: leftWidth }
          });
        if(child.props._right)
          return React.cloneElement(child, {
            ...child.props,
            collapsed,
            _onClickCollapse: this.toState({ collapsed: !collapsed },
              () => onClickCollapse && onClickCollapse(!collapsed)),
            style: collapsed ?
              { left: 0, width: '100%' } :
              { left: leftWidth, width: `calc(100% - ${leftWidth}px)` }
          });
        return child;
      } else {
        return child;
      }
    })
  };

  render() {
    return (
      <div className='column-layout'>
        {this.renderChildren()}
      </div>
    )
  }

}

ColumnLayout.ColumnLayoutLeft = ColumnLayoutLeft;
ColumnLayout.ColumnLayoutRight = ColumnLayoutRight;

export default ColumnLayout;
